<template>
  <div>
    <div class="box">
      <div class="con">
        <div style="text-align: center;">
          <svg
            data-v-81d70f2a=""
            data-v-c0dcf7e2=""
            aria-hidden="true"
            class="svg-icon"
            style="width: 56px; height: 56px; color: rgb(64, 158, 255);"
          >
            <use data-v-81d70f2a="" xlink:href="#icon-login-mall">
              <svg
                class="icon"
                viewBox="0 0 1024 1024"
                id="icon-login-mall"
                width="100%"
                height="100%"
              >
                <path
                  d="M825.6 554.666667c-64 0-121.6-38.4-155.733333-89.6C633.6 516.266667 576 554.666667 512 554.666667s-121.6-38.4-155.733333-89.6C320 516.266667 264.533333 554.666667 198.4 554.666667 89.6 554.666667 0 465.066667 0 356.266667v-8.533334L151.466667 0h721.066666L1024 345.6v8.533333c0 110.933333-89.6 200.533333-198.4 200.533334z m-200.533333-219.733334h85.333333c0 61.866667 51.2 134.4 113.066667 134.4 59.733333 0 108.8-46.933333 113.066666-104.533333L817.066667 85.333333H206.933333L85.333333 364.8c4.266667 57.6 53.333333 104.533333 113.066667 104.533333 64 0 113.066667-74.666667 113.066667-134.4h85.333333c0 61.866667 51.2 134.4 113.066667 134.4 66.133333 0 115.2-74.666667 115.2-134.4zM810.666667 1021.866667H213.333333c-83.2 0-149.333333-64-149.333333-142.933334V595.2h85.333333v283.733333c0 32 27.733333 57.6 64 57.6h597.333334c34.133333 0 64-25.6 64-57.6V595.2h85.333333v283.733333c0 78.933333-66.133333 142.933333-149.333333 142.933334z"
                  p-id="2044"
                ></path>
              </svg>
            </use>
          </svg>
        </div>
        <h2 class="login-title color-main">mall-admin-web</h2>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="name">
            <el-input
              placeholder="请输入用户名"
              v-model.number="ruleForm.name"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              placeholder="请输入密码"
              prefix-icon="el-icon-unlock"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 140px; margin: 0 10px;"
              type="primary"
              @click="submitForm('ruleForm')"
            >
              提交
            </el-button>
            <el-button
              style="width: 130px; margin: 0 10px;"
              @click="resetForm('ruleForm')"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <img
      src="http://www.macrozheng.com/admin/static/img/login_center_bg.5307896.png"
      alt=""
    />
  </div>
</template>

<script>
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能少于3位'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        pass: 'macro123',
        name: 'admin',
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        name: [{ validator: checkAge, trigger: 'blur' }],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post('/admin/login', {
              username: this.ruleForm.name,
              password: this.ruleForm.pass,
            })
            .then((res) => {
              let as = res.data.data
              if (res.data.code === 200) {
                this.$message({
                  message: '输入成功',
                  type: 'success',
                })
                localStorage.setItem('token', as.tokenHead + as.token)
                this.$router.push('/home')
              } else {
                this.$message({
                  message: '用户名或密码错误',
                  type: 'error',
                })
              }
            })
        } else {
          this.$message({
            message: '用户名或密码错误',
            type: 'error',
          })
          return false
        }
      })
    },
    resetForm(formName) {
      this.ruleForm = {
        pass: '',
        name: '',
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  position: absolute;
  left: 0;
  right: 0;
  width: 360px;
  margin: 140px auto;
  border-radius: 4px;
  box-sizing: inherit;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
  border-top: 10px solid #409eff;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
  .con {
    padding: 20px;
  }
}
.box + img {
  background: #409eff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-top: 200px;
}
.color-main {
  color: #409eff;
  margin: 0.83em 0;
  text-align: center;
}

.svg-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  fill: currentColor;
  overflow: hidden;
}
</style>
